<script setup>
import { defineProps,ref,computed } from 'vue';
import {EnvironmentOutlined, AuditOutlined, BookOutlined} from '@ant-design/icons-vue'
import star from '@/assets/star.png'
import {message} from 'ant-design-vue'
import starFill from '@/assets/starFill.png'
import router from "@/router/router.js";
import {createChatSession, deleteMessage} from "@/api/message.js";
import ApplyJob from "@/components/ApplyJob.vue";

// 定义从父组件接收的props
const props = defineProps({
  title:{
    type: String,
    default: '未选择岗位'
  },
  logo: {
    type: String
  },
  tags: {
    type: String,
    default: () => []
  },
  salary:{
    type: String
  },
  description:{
    type: String
  },
  companyName:{
    type: String
  },
  city:{
    type: String,
    default: '无'
  },
  companyId: {
    type: String
  },
  jobId: {
    type: String
  }
})

// 动态填充颜色
const isStarred = ref(false);

const starDefault = ref({
  marginTop: '8px',
  width: '20px',
  height: '20px'
})

// 切换收藏状态及填充颜色
const starJob = () => {
  isStarred.value = !isStarred.value
};

const onCommunicate = async () => {
  try {
    const res = await createChatSession ({
      jobId: props.jobId,
      companyId: props.companyId,
    })
    if(res.data.code === 200|| res.data.code === 400){
      router.push({
        name: 'messageBox',
        query: {
          chatSessionId: String(res.data.data)
        }
      })
    }else {
      throw new Error('创建会话失败')
    }
  }catch{
    message.error('创建会话失败')
  }

}

const isApplyJobVisible = ref(false)

const handlerApplyJobs = () =>{
  isApplyJobVisible.value = true
}

// 计算属性，将 \n 转换成 <br>
const formattedDescription = computed(() => {
  if (props.description) {
    return props.description.replace(/\n/g, '<br>');
  }
  return '';
});

//跳转到公司详情
const toCompanyInfo = () =>{
  router.push({
    name: 'companyinfo',
    query: {
      companyId: props.companyId,
    }
  })
}
</script>

<template>
  <a-card title="职位详情">
    <template #extra>
      <a-col class="job-actions" >
<!--        <a-button type="primary" size="middle">投递简历</a-button>-->
        <a-button type="primary" size="middle" @click="onCommunicate">立即沟通</a-button>
        <a-button type="primary" size="middle" @click="handlerApplyJobs">立即申请</a-button>
      </a-col>
    </template>
    <a-row style="display: flex;justify-content: space-between">
      <a-col class="job-detail-header">
        <span class="job-name">{{ title }}</span>
        <span class="job-salary">{{ salary }}</span>
      </a-col>
      <a-col class="job-actions" >
        <div class="star-job" @click="starJob">
          <div v-if="isStarred" style="text-align: center">
            <a-image :preview="false" :src="starFill" :style="starDefault"></a-image>
          </div>
          <div v-else style="text-align: center">
            <a-image :preview="false" :src="star" :style="starDefault"></a-image>
          </div>
<!--          <span style="margin-left: 12px;font-size: 12px">收藏</span>-->
        </div>
      </a-col>
    </a-row>
    <div class="job-tags">
      <a-tag>
        <template #icon>
          <EnvironmentOutlined />
          <span>{{city}}</span>
        </template>
      </a-tag>
      <a-tag v-for="(item,index) in tags" :key="index">
        {{item}}
      </a-tag>
    </div>
    <!--职位描述-->
    <div class="job-description-container">
      <span class="job-name">职位描述</span>
      <div v-if="description" class="job-description" v-html="formattedDescription"></div>
      <a-empty description="还没有描述" v-else ></a-empty>
    </div>
    <div class="publisher-container" @click="toCompanyInfo">
      <div class="publisher-avatar">
        <a-avatar :size="64" :src="logo"/>
      </div>
      <div class="publisher-info">
        <span>{{companyName}}</span>
      </div>
    </div>
<!--    <div class="moreinfo-button-container">-->
<!--      <a-button class="moreinfo-button" @click="moreInfo">查看详细信息</a-button>-->
<!--    </div>-->
    <ApplyJob  v-model:open="isApplyJobVisible" :job-info="{jobId: jobId,title: title}"></ApplyJob>
  </a-card>
</template>

<style scoped>
.job-detail-header {
  display: flex;
  align-items: center;
  font-size: 24px;
  margin-bottom: 10px;
}

.job-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-right: 10px;
}

.job-description-container {
  border-top: 1px #eeeeee solid;
  min-height: 550px;
  margin-top: 30px;
  padding-top: 30px;
}

.job-description {
  min-height: 280px;
}

.job-name {
  font-size: 24px;
  font-weight: bolder;
  display: flex;
  margin-right: 50px;
}

.job-salary {
  display: flex;
  font-size: 18px;
  font-weight: bolder;
  color: red;
}

.star-job {
  position: absolute;
  right: 10px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-color: #f1f2f6;
  border-radius: 5px;
}

.job-description-tags {
  cursor: default;
  margin: 30px 0;
}

.job-tags {
  cursor: default;
}

.publisher-container {
  height: 90px;
  border-top: 2px #eeeeee solid;
  border-bottom: 2px #eeeeee solid;
  display: flex;
  align-items: center;
}

.publisher-avatar {
  display: flex;
  align-items: center;
  margin: 0 13px;
}

.publisher-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.publisher-container:hover{
  background-color: #f8f8f8;
  cursor: pointer;
}

.moreinfo-button-container {
  display: flex;
  justify-content: center;
}

.moreinfo-button {
  width: 150px;
  height: 40px;
  text-align: center;
  margin-top: 30px;
  border: 1px solid #00bebd;
  color: #00bdbc;
}

:hover.moreinfo-button  {
  color: #00bdbc;
  border: 1px solid #00bebd;
  background-color: #e5f8f8;
}
</style>
